<template>
	<view>
		<hx-navbar  :border="false" :fixed="true" transparent="hidden"
			 :pageScroll.sync="scrollData" height="140rpx">
			<view style="text-align: left;width: 100%;font-weight: 700;"><text>订单备注</text></view>
			
		</hx-navbar>
		
		<view style="background: linear-gradient(189.08deg, #DBF9F1 0%, rgba(219, 249, 241, 0) 36.82%), #FFFFFF;;height:256rpx;width: 100%;position: absolute;top: 0;"></view>
	<view class="container overflow-hidden" style="width: 100%; ">
		
		<view class="textarea">
			<textarea placeholder-class="text-color-assist font-size-base" v-model="remark"
				class="bg-white border-box font-size-base remark"
				style="width: 100%;"
				:class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}"
				placeholder="无接触配送，辛苦将商品放宿舍门口或放宿管阿姨桌上或指定地点" focus/>
			<view class="tips" :class="{'text-color-danger': remarkLength > 50, 'text-color-assist' : remarkLength <=50}" style="font-size: 20rpx;">
				{{ remarkLength }}<text style="color:rgba(178, 176, 176, 1) ;">/50</text>
			</view>
		</view>
		<view class="font-size-base text-color-assist" style="margin: 40rpx 0 20rpx 0; display: flex;font-size: 20rpx;color: rgba(131, 131, 131, 1);">
			快捷输入
		</view>
		<view class="quick-inputs flex-wrap justify-content-start" style="display: flex;">
			<view class="quick-input" v-for="(item, index) in quickInputs" :key="index" @tap="handleQuickInput(item)">
				{{ item }}
			</view>
		</view>
		<view class="d-flex just-content-center align-items-center" >
			<button class="add-btn submit-btn font-size-base" @tap="submit">完成</button>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark: '',
				quickInputs: [
					'不吃辣','少放辣','不吃葱', '不吃香菜', '宿舍有人睡觉，不用敲门，放门口'
				]
			}
		},
		onLoad(option) {
			this.remark =option.remark
		},
		computed: {
			remarkLength() {
				return this.remark.length
			},
			isDanger() {
				return this.remark.length > 50
			}
		},
		methods: {
			handleQuickInput(item) {
				this.remark = this.remark.concat(" ", item)
			},
			submit() {
				console.log(getApp().globalData.remark);
				getApp().globalData.remark = this.remark;
				uni.navigateBack({
					delta: 0
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.add-btn {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		width: 690rpx;
		height: 80rpx;
		margin: 40rpx auto;
		font-size: 32rpx;
		color: #fff;
		background-color: #ffa473;
		border-radius: 10rpx;
		-webkit-box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
	.container {
		padding: 30rpx 24rpx;
		.textarea {
			position: relative;
			.remark {
				background-color: rgba(243, 244, 246, 1);
				border-radius: 16rpx;
				padding: 24rpx;
				height: 320rpx;
				color: $font-size-base;
				font-size: 24rpx;
			}
			
			.tips {
				position: absolute;
				bottom: 30rpx;
				right: 40rpx;
			}
		}
		
		.quick-inputs {
			padding-right: 20rpx;
			
			.quick-input {
				background-color: #FFFFFF;
				border: 2rpx solid rgba(225, 225, 225, 1);
				color: rgba(85, 85, 85, 1);
				font-size:22rpx;
				padding: 12rpx 24rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 12rpx;
			}
		}
		
		.submit-btn {
			width: 100%;
			height: 100rpx;
			font-weight: 700;
			border-radius: 40rpx;
			letter-spacing: 4rpx;
			line-height: 100rpx;
			background: linear-gradient(104.97deg, #FC9A8D 27.17%, #FDDBB4 107.39%);
			box-shadow: 0px 8rpx 8rpx rgba(0, 0, 0, 0.1);
			border-radius: 14rpx;
		}
	}
</style>
